{% extends 'base.html' %}

{% block title %}Register New User{% endblock %}
{% block content %}
<div class="login-container">
    <h2>Register New User</h2>
    {% with messages = get_flashed_messages(with_categories=True) %}
            {% if messages %}
                <div class="flash-messages">
                    {% for category, message in messages %}
                        <div class="flash flash-{{ category }}">{{ message }}</div>
                    {% endfor %}
                </div>
    {% endif %}
{% endwith %}   
    <form action="{{ url_for('register') }}" method="POST">
        <div class="form-group row">
            <label for="username" class="form-label">Username</label>
            <input type="text" id="username" name="username" placeholder="" required class="form-input">
        </div>
        <div class="form-group row">
            <label for="email" class="form-label">Email</label>
            <input type="email" id="email" name="email" placeholder="" required class="form-input">
        </div>
        <div class="form-group row">
            <label for="password" class="form-label">Password</label>
            <input type="password" id="password" name="password" placeholder="" required class="form-input">
        </div>
        <input type="hidden" name="role" value="child">
        <div class="form-group">
            <button type="submit" class="btn">Register</button>
        </div>
    </form>
    <p>Already have an account? <a href="{{ url_for('login') }}"> Login now</a></p>
</div>
{% endblock %}